<template>
  <div class="homeCategory">
    <ul>
      <li
        v-for="item in categoryList"
        :key="item.id"
        @click="changeCate(item)"
        @mouseenter="changeCate(item)"
      >
        <RouterLink to="/"> {{ item.name }} </RouterLink>
        <RouterLink v-for="i in item.children.slice(0, 2)" :key="i" to="/">
          {{ i.name }}
        </RouterLink>
      </li>
    </ul>

    <div class="cateList">
      <HomeBanner />

      <h3>{{ activeCate.name }}</h3>

      <div class="cateItemList">
        <RouterLink :to="`/detail/${i.id}`" class="cateItem" v-for="i in activeCate.goods" :key="i">
          <div class="left">
            <img :src="i.picture" alt="" />
          </div>
          <div class="right">
            <p class="title">{{ i.name }}</p>
            <p class="desc">{{ i.desc }}</p>
            <p class="price">¥{{ i.price }}</p>
          </div>
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<script setup name="ComponentName">
import { emitter } from '@/utils/emitter.js'
import { onMounted, onUnmounted, ref } from 'vue'
import { RouterLink } from 'vue-router'
import HomeBanner from './HomeBanner.vue'

const categoryList = ref([])
const activeCate = ref({})

onMounted(() => {
  emitter.on('categoryList', (data) => {
    categoryList.value = data
  })
})

onUnmounted(() => {
  emitter.off('categoryList')
})
const changeCate = (item) => {
  activeCate.value = item
}
</script>

<style scoped lang="scss">
.homeCategory {
  width: 100%;
  height: 500px;
  padding: 0 100px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  ul {
    width: 300px;
    height: 100%;
    background: #212020;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    li {
      width: 100%;
      height: 55px;
      display: flex;
      flex-flow: row nowrap;
      padding: 0 30px;
      gap: 10px;
      &:hover {
        background: #444;
      }
      a {
        height: 100%;
        font-size: 16px;
        border-radius: 8px;
        color: #fff;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .cateList {
    width: calc(100% - 300px);
    background: #fff;
    padding: 20px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    /* 多行使用 */
    align-content: flex-start;
    height: 100%;
    /* 单行使用 */
    /* align-items: center; */

    gap: 15px;
    .cateItemList {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center;
      gap: 15px 10px;
      .cateItem {
        width: calc(33% - 5px);
        height: 130px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 5px 20px;

        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          transition: all 0.3s ease-in-out;
        }
        .left {
          width: 110px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          width: calc(100% - 130px);
          p {
            width: 100%;
            height: 20px;
            font-size: 16px;
            color: #333;
            &.title {
              height: 30px;
              font-size: 20px;
              font-weight: bold;
              /* 超出部分省略号 2行 */
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &.desc {
              height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &.price {
              height: 30px;
              font-size: 20px;
              color: #f00;
            }
          }
        }
      }

    }
  }
}
</style>
